<template>
	<!-- 优惠券盒子 -->
	<view class="coupon_box">

		<!-- 跳转我的优惠券 -->
		<view class="coupon-nav" :style="'top:' + stickyTop + 'px'">
			<view>
				先领券再抽盒
			</view>
			<view class="go-to-couponticket" @click="goToPage('/pages/couponticket/couponticket')">
				<text>我的优惠券</text>
				<uni-icons type="forward" color="#333" size="32rpx" class="icon"></uni-icons>
			</view>
		</view>

		<!-- 优惠券 -->
		<view class="coupon_item_box">
			<!-- 优惠券的内容 遍历 -->
			<view class="coupon_item_cont">
				<!-- 左侧盒子 -->
				<view class="item_cont_left">
					<!-- 优惠券类型 -->
					<view class="coupon_kind">商品券</view>
					<!-- 优惠券抵扣价格 -->
					<view class="coupon_money">￥59</view>
					<!-- 优惠券使用条件 -->
					<view class="coupon_condition">满119元可用</view>
				</view>
				<!-- 右侧盒子 -->
				<view class="item_cont_right">
					<!-- 描述性文字 -->
					<view class="coupon_des">
						<!-- 优惠券名称 -->
						<view class="coupon_name">专属优惠券</view>
						<view class="coupon_middle">
							<!-- 优惠券有效期 -->
							<view class="coupon_time">领取后三天内有效</view>
							<!-- 优惠券的操作 -->
							<view class="coupon_action">立即领取</view>
						</view>
						<!-- 已抢 -->
						<view class="coupon_rest">
							<view class="coupon_rest_line">
								<view class="line_left" :style="'width: '+num20+'px'"></view>
								<view class="line_right" :style="'width: '+(100-num20)+'px'"></view>
							</view>
							<view class="coupon_rest_number">已领{{num20}}%</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 优惠券的内容 遍历 -->
			<view class="coupon_item_cont">
				<!-- 左侧盒子 -->
				<view class="item_cont_left">
					<!-- 优惠券类型 -->
					<view class="coupon_kind">商品券</view>
					<!-- 优惠券抵扣价格 -->
					<view class="coupon_money">9.5折</view>
					<!-- 优惠券使用条件 -->
					<view class="coupon_condition">满119元可用</view>
				</view>
				<!-- 右侧盒子 -->
				<view class="item_cont_right">
					<!-- 描述性文字 -->
					<view class="coupon_des">
						<!-- 优惠券名称 -->
						<view class="coupon_name">商城购物专属优惠券商城购物专属优惠券</view>
						<view class="coupon_middle">
							<!-- 优惠券有效期 -->
							<view class="coupon_time">有效期至：2023-03-02</view>
							<!-- 优惠券的操作 -->
							<view class="coupon_action">去使用</view>
						</view>
						<!-- 已抢 -->
						<view class="coupon_rest">
							<view class="coupon_rest_line">
								<view class="line_left" :style="'width: '+num50+'px'"></view>
								<view class="line_right" :style="'width: '+(100-num50)+'px'"></view>
							</view>
							<view class="coupon_rest_number">已领{{num50}}%</view>
						</view>
					</view>
				</view>
			</view>

			<view class="coupon_item_cont" v-for="it in 3">
				<!-- 左侧盒子 -->
				<view class="item_cont_left">
					<!-- 优惠券类型 -->
					<view class="coupon_kind">商品券</view>
					<!-- 优惠券抵扣价格 -->
					<view class="coupon_money">￥59</view>
					<!-- 优惠券使用条件 -->
					<view class="coupon_condition">满119元可用</view>
				</view>
				<!-- 右侧盒子 -->
				<view class="item_cont_right">
					<!-- 描述性文字 -->
					<view class="coupon_des">
						<!-- 优惠券名称 -->
						<view class="coupon_name">商城购物专属优惠券</view>
						<view class="coupon_middle">
							<!-- 优惠券有效期 -->
							<view class="coupon_time">有效期至：2023-03-02</view>
							<!-- 优惠券的操作 -->
							<view class="coupon_action go_no">已抢完</view>
						</view>
						<!-- 已抢 -->
						<view class="coupon_rest">
							<view class="coupon_rest_line">
								<view class="line_left" :style="'width: '+num100+'px'"></view>
								<view class="line_right" :style="'width: '+(100-num100)+'px'"></view>
							</view>
							<view class="coupon_rest_number">已领{{num100}}%</view>
						</view>
					</view>
				</view>
			</view>

			<view class="no-more">没有更多了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num20: 20,
				num50: 50,
				num100: 100,

				stickyTop: 0
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		},
		components: {

		}
	}
</script>

<style lang="scss">
	// 优惠券盒子
	.coupon_box {
		width: 100vw;

		.coupon-nav {
			position: sticky;

			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 32rpx;
			color: #333;
			background: #fff;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
			z-index: 99;

			// 跳转我的优惠券
			.go-to-couponticket {
				font-size: 28rpx;
				font-weight: normal;
				color: #333;

				.icon {
					vertical-align: middle;
				}
			}
		}

		// 优惠券项
		.coupon_item_box {
			padding-top: 32rpx;

			// 优惠券的具体项
			.coupon_item_cont {
				position: relative;
				display: flex;
				width: 690rpx;
				border-radius: 16rpx;
				margin: 20rpx auto 0;
				background: #2B2C3C;
				box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);

				&:first-child {
					margin: 0 auto;
				}

				// 左侧盒子
				.item_cont_left {
					width: 192rpx;
					height: 220rpx;
					border-right: 1rpx dashed rgba(255, 255, 255, 0.3);

					// 优惠券种类
					.coupon_kind {
						width: 90rpx;
						height: 38rpx;
						font-size: 18rpx;
						text-align: center;
						line-height: 38rpx;
						color: #fff;
						border-radius: 16rpx 0 16rpx 0;
						background: rgba(255, 255, 255, 0.1);
					}

					// 优惠券
					.coupon_money {
						font-size: 60rpx;
						font-weight: bold;
						line-height: 120rpx;
						color: #FF7803;
						text-align: center;
					}

					// 优惠券说明
					.coupon_condition {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #fff;
						text-align: center;
					}
				}

				// 右侧盒子
				.item_cont_right {
					display: flex;
					justify-content: space-between;
					width: 496rpx;
					height: 220rpx;
					padding-left: 40rpx;
					box-sizing: border-box;

					// 描述
					.coupon_des {

						// 优惠券名称
						.coupon_name {
							width: 282rpx;
							font-size: 28rpx;
							font-weight: 500;
							margin-top: 40rpx;
							color: #fff;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}

						// 中间盒子
						.coupon_middle {
							display: flex;
							justify-content: space-between;
							width: 440rpx;

							// 有效期
							.coupon_time {
								font-size: 18rpx;
								font-weight: normal;
								line-height: 80rpx;
								color: #999;
							}

							// 优惠券的点击事件
							.coupon_action {
								width: 120rpx;
								height: 48rpx;
								border: 2rpx solid #FF7803;
								margin-top: 16rpx;
								margin-left: 40rpx;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-weight: 500;
								text-align: center;
								line-height: 48rpx;
								color: #FF7803;

								// 已抢完
								&.go_no {
									opacity: .6;
								}
							}
						}

						// 剩余
						.coupon_rest {
							display: flex;
							padding: 20rpx 0;

							// 线条
							.coupon_rest_line {
								display: flex;

								.line_left {
									height: 8rpx;
									margin-top: 4rpx;
									border-radius: 4rpx;
									background: #FF7803;
								}

								.line_right {
									height: 8rpx;
									margin-top: 4rpx;
									border-top-right-radius: 4rpx;
									border-bottom-right-radius: 4rpx;
									background: rgba(255, 255, 255, 0.1);
								}
							}

							// 优惠券数量
							.coupon_rest_number {
								margin-left: 20rpx;
								font-size: 18rpx;
								line-height: 18rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}

	// 每个优惠券上下的半圆
	.coupon_item_cont::before,
	.coupon_item_cont::after {
		position: absolute;
		left: 176rpx;
		display: inline-block;
		content: '';
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: #f8f8f8;
	}

	.coupon_item_cont::before {
		top: 0rpx;
		transform: translateY(-50%);
	}

	.coupon_item_cont::after {
		bottom: 0rpx;
		transform: translateY(50%);
	}

	.no-more {
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: #999;
	}
</style>
